<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery.EasyUI- 1.2.2 应用实例</title>
		<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="../js/themes/icon.css" />
		<link rel="stylesheet" type="text/css" href="../css/default.css" />
		<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.1.2.2.js"></script>
		<script type="text/javascript" src='../js/outlook2.js'> </script>
		<style type="text/css">
	    	div ul li{
				list-style:none;
				float:left;
				padding-right:10px;
			}
    	</style>
		<script type="text/javascript">
		 function loaddatagrid(){
			$('#test').datagrid({
				iconCls:'icon-save',
				nowrap: true,
				autoRowHeight: false,
				striped: true,
				collapsible:true,
				remoteSort: false,
				columns:[[
					{field:'ck',checkbox:true},
					{title:'所属字典',field:'codeSetId',width:$(this).width() * 0.10},
					{title:'编号',field:'codeId',width:$(this).width() * 0.10},
					{title:'名字',field:'name',width:$(this).width() * 0.10},
					{title:'分类数',field:'sortNumber',width:$(this).width() * 0.10},
					{title:'帮助编号',field:'helpCode',width:$(this).width() * 0.10},
					{title:'管理员',field:'isSystem',width:$(this).width() * 0.10}
				]],
				pagination:true,
				rownumbers:true,
				toolbar:[{
					id:'btnadd',
					text:'添加',
					iconCls:'icon-add',
				handler:function(){
					$('#btnsave').linkbutton('enable');
						addItem();
					}
				},{
					id:'btncut',
					text:'删除',
					iconCls:'icon-cut',
				handler:function(){
					$('#btnsave').linkbutton('enable');
						removeWord();
					}
				},'-',{
					id:'btnsave',
					text:'修改',
					iconCls:'icon-save',
				handler:function(){
					$('#btnsave').linkbutton('enable');
						savaItem();
					}
				}]
			});
		 }
    		function loadMenu(uid){
    			loaddatagrid();
    			$.ajax({
    				type:'post',    				 
    				url:'${pageContext.request.contextPath}/word/getAllWord?uid='+uid,
    				dataType:'json',
    				success:function(data){
						var data1 = {"rows":data};
						$('#test').datagrid("loadData", data1);
    				},
    				error:function(){
						$.messager.alert("结果", "错了!", "info", null); 
					}
 				})
 			}
 			function addItem(){
 				$('#add').window('open');
 			}
 			function add(){
				$.ajax({
					type:'post',
	    			url:'${pageContext.request.contextPath}/word/addWord',
	    			data:$('#addform').serialize()
	    		});
			}
 			function savaItem(){
		 		var rowsd = $('#test').datagrid("getSelections");
				if(rowsd.length == 0){
					$.messager.alert("提示消息","请选择要修改的的列");
					return;
				}
				if(rowsd.length > 1){
					$.messager.alert("提示消息","只能选择一列");
					return;
				}
				var rowsds = rowsd[0];
				var codeSetId = rowsds.codeSetId;
				var codeId = rowsds.codeId;
				var name = rowsds.name;
				var sortNumber = rowsds.sortNumber;
				var helpCode = rowsds.helpCode;
				var isSystem = rowsds.isSystem;
				$('#update').window('open');
				document.getElementById("codeSetId").value=codeSetId;
				document.getElementById("codeId").value=codeId;
				document.getElementById("name").value=name;
				document.getElementById("sortNumber").value=sortNumber;
				document.getElementById("helpCode").value=helpCode;
				document.getElementById("isSystem").value=isSystem;
			}
			function sava(){
				$.ajax({
					type:'post',
	    			url:'${pageContext.request.contextPath}/word/updateWord',
	    			data:$('#updateform').serialize()
	    		});
			}
  			function removeWord(){
  				var rows = $('#test').datagrid("getSelections");
				if(!rows || rows.length < 1){
					$.messager.alert("提示消息","请选择要删除的列");
					return;
				}
				$.messager.confirm("提示消息","确定删除？",function(r){
				if(r){
					for ( var i = 0; i < rows.length; i ++) {
						$.post("${pageContext.request.contextPath}/word/delWord",
							{"roomIds":rows[i].codeId},
						function(data){
							if("success" == data.result){
								$.messager.alert("提示信息","删除成功");
								window.location.reload();
							}else{
								$.messager.alert("提示信息","删除失败");
							}
						});
					}
				}
			});
  		}
  		</script>
		<style>
			article, aside, figure, footer, header, hgroup, 
			menu, nav, section { display: block; }
			.west{
				width:150px;
				padding:10px;
			}
			.north{
				height:100px;
			}
		</style>
  </head>
  
 <body id="cc" class="easyui-layout">
  	<div region="west" hide="true" split="true" title="子集" style="width:237px;">
  		<ul id="tt1" class="easyui-tree" data-options="animate:true,dnd:true">
  			<c:if test="${!empty word }">
				<c:forEach items="${word }" var="word1">
	  				<li>
	  					<div align="left"><a href="javascript:;" onclick="loadMenu('${word1.codesetid }')">${word1.name }</a></div>
	  				</li>
	  			</c:forEach>
			</c:if>
  		</ul>
  	</div>
  	<div id="mainPanle" region="center" style="background: #eee; overflow-y:hidden">
        <table id="test"></table>
   	</div>
   	<div id="update" class="easyui-window" title="修改" collapsible="false" minimizable="false" closed="true"
            maximizable="false" icon="icon-save"  style="width: 300px; height: 400px; padding: 5px; background: #fafafa;">
          <div class="easyui-layout" fit="true">
              <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                <form action="" id="updateform">
                   <table cellpadding=3>
                    <tr>
						<td align="right">所属字典*</td>
		       			<td><input type="text" value="" name="codeSetId"/></td>
					</tr>
					<tr>
						<td align="right">编号*</td>
		       			<td><input type="text" value="" name="codeId"/></td>
					</tr>
					<tr>
						<td align="right">名字*</td>
		       			<td><input type="text" value="" name="name"/></td>
					</tr>
					<tr>
						<td align="right">分类数*</td>
		       			<td><input type="text" value="" name="sortNumber" /></td>
					</tr>
					<tr>
						<td align="right">帮助编号*</td>
		       			<td><input type="text" value="" name="helpCode"/></td>
					</tr>
					<tr>
						<td align="right">管理员*</td>
		       			<td><input type="text" value="" name="isSystem" /></td>
					</tr>
					<tr>
                    	<td align="right"><input type="button" onclick="sava()" value="提交"/></td>
                     	<td align="left"><input type="reset" value="重置"/></td>
                    </tr>
                  </table>
                </form>
             </div>
      	</div>
    </div>
    <div id="add" class="easyui-window" title="修改" collapsible="false" minimizable="false" closed="true"
            maximizable="false" icon="icon-save"  style="width: 300px; height: 400px; padding: 5px; background: #fafafa;">
          <div class="easyui-layout" fit="true">
              <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                <form action="" id="addform">
                   <table cellpadding=3>
                    <tr>
						<td align="right">所属字典*</td>
		       			<td><input type="text" value="" name="codeSetId"/></td>
					</tr>
					<tr>
						<td align="right">编号*</td>
		       			<td><input type="text" value="" name="codeId"/></td>
					</tr>
					<tr>
						<td align="right">名字*</td>
		       			<td><input type="text" value="" name="name"/></td>
					</tr>
					<tr>
						<td align="right">分类数*</td>
		       			<td><input type="text" value="" name="sortNumber" /></td>
					</tr>
					<tr>
						<td align="right">帮助编号*</td>
		       			<td><input type="text" value="" name="helpCode"/></td>
					</tr>
					<tr>
						<td align="right">管理员*</td>
		       			<td><input type="text" value="" name="isSystem" /></td>
					</tr>
					<tr>
                    	<td align="right"><input type="button" onclick="add()" value="提交"/></td>
                     	<td align="left"><input type="reset" value="重置"/></td>
                    </tr>
                  </table>
                </form>
             </div>
      	</div>
    </div>
	</body>
</html>
